<template>
  <div class="box">
    <div class="top">

      <div id="top_left">
        <div class="dw">
          <img src="../assets/map.png" width="25px" height="100%">
        </div>
        <div class="city">
          <van-dropdown-menu id="city">
            <van-dropdown-item v-model="value1" :options="city" @change="change_city" />
          </van-dropdown-menu>
        </div>
      </div>
      <span id="shouye">首页</span>
      <button id="top_right" @click="back">点击退出</button>
    </div>
    <div class="slzn">
      <img src="../assets/slzn.png" id="slzn" width="90%">
    </div>
    <div>
      <ul class="peizhen">
        <li>
          <img src="../assets/诊前咨询.png" width="62px" height="100%"><br>
          诊前查询
        </li>
        <li>
          <img src="../assets/诊前约号.png" width="62px" height="100%"><br>
          诊前约号
        </li>
        <li>
          <img src="../assets/代办问诊.png" width="62px" height="100%"><br>
          代办问诊
        </li>
        <li>
          <img src="../assets/代办买药.png" width="62px" height="100%"><br>
          代办买药
        </li>
        <li>
          <img src="../assets/送取结果.png" width="62px" height="100%"><br>
          送取结果
        </li>
      </ul>
    </div>

    <div>
      <div id="TREAT">
        <img id="treat_div" src="../assets/treat.png" @click="to_esc" width="200px" height="100%" padding-right: 10px;>
        <img id="acc_div" src="../assets/acco.png" @click="to_hos" width="200px" height="100%">
      </div>
    </div>
    <div style="overflow: auto; height:40%">

      <div id="div_1" v-for="item in hos_info" :key="item.id" @click="to_hospital(item.name)">
        <van-card desc="" :title="item.name" :thumb="item.hos_img">
          <template #tags>
            <van-tag plain type="primary">{{ item.grade }}</van-tag>
            <van-tag plain type="primary">{{ item.classes }}</van-tag><br>
            <van-tag plain type="primary">{{ item.department }}</van-tag>
          </template>
</van-card>
</div>
</div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import axios from 'axios';
const route = useRoute();
const active = ref(0);
let hos_info = reactive('');
let selectedCity = ref('');
let host_path = ref('');
const show = ref(false);
import city from '../assets/city.json';
import router from '@/router';
const value1 = ref('1408');
function to_esc() {
  router.push('./escacc')
}

function to_hos() {
  router.push('./hosacc')
}

// 根据选择的城市获取医院的详情信息
const change_city = (value) => {
  selectedCity = city.find(item => item.value === value)
  console.log(selectedCity.text)
  axios({
    method: 'post',
    url: 'http://127.0.0.1:8000/select_hos/',
    data: {
      selectedCity: selectedCity.text
    }
  }).then(res => {
    console.log(res.data)
    hos_info.value = res.data.msg

  }).catch(err => {
    console.log(err)
  })
}
onMounted(() => {
  change_city(value1.value)
})

// 获取医院地图
function to_hospital(item) {
  router.push({
    path: '/hpath',
    query: {
      name: item
    }
  })
}
</script>

<style scoped>
/* 
.box {
  background-color: #488EF6;
  width: 100%;
} */

.top {
  display: flex;
  justify-content: space-between;
  /* margin-top: 10px;
  margin-bottom: 15px; */
  padding: 10px;
  background-color: #488EF6;

}

#top_left {
  justify-content: flex-end;
}

.dw {
  width: 100%;
  border: 1px solid black;
}

#city .van-dropdown-menu__bar {
  height: auto;
  background: transparent;
  box-shadow: none;
}

#city .van-dropdown-menu__item {
  justify-content: left;
}

#top_right {
  background-color: #3A71C6;
  border-radius: 20px;
  color: #F9FEFF;
  border: none;
  font-size: 14px;
}

#shouye {
  justify-content: space-between;
}

.slzn {
  background-image: linear-gradient(to bottom, #488EF6, #FFFFFF);
}

#slzn {
  border-radius: 10px;
  border: 1px solid red;
  margin-top: 20px;
  display: block;
  margin: 0 auto;
}

.peizhen {
  margin: 17px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  clear: both;
  background-color: #FFFFFF;
}

.peizhen li {
  float: left;
}
</style>